import {
  ModalForm,
  ProForm,
  ProFormRadio,
  ProFormText,
} from '@ant-design/pro-components';
import React  from "react";
import { ProFormTextArea} from "@ant-design/pro-form/lib";

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
export type Props = {
  // value?: API.InterfaceInfoVO;
  title: string
  open: boolean;
  onCancel: () => void;
  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
  onSubmit: (values : API.InterfaceInfoVO) => Promise<void>;
  values: API.InterfaceInfoVO;
};

const InterfaceModalForm: React.FC<Props>  = (props) => {
const {title,open,onOpenChange,onSubmit,values} = props
  // const actionRef = useRef<
  //   FormListActionType<{
  //     name: string;
  //   }>
  // >();
  return (
    <ModalForm<{
      name: string;
      company: string;
    }>
      title={title}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => console.log('run'),
      }}
      submitTimeout={2000}
      onFinish={async (values ) => {
        await waitTime(2000);
        await onSubmit(values as API.InterfaceInfoVO)
        // console.log(values);
        return true;
      }}
      open={open}
      onOpenChange={onOpenChange}
    >
      <ProForm.Group>
        <ProFormText
          width="md"
          name="interfaceName"
          label="接口名称"
          tooltip="最长为 24 位"
          placeholder="请输入接口名称"
          initialValue={values.interfaceName}
          rules={
            [
              {
                required: true,
                message: '请输入接口名称',
              },
            ]
          }
        />

        <ProFormText
          width="md"
          name="url"
          label="接口地址"
          placeholder="请输入接口地址"
          initialValue={values.url}
          rules={
            [
              {
                required: true,
                message: '请输入接口地址',
              },
            ]
          }
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormRadio.Group
          name="requestMethod"
          label="请求方法"
          initialValue={values.requestMethod}
          options={[
            {
              label: 'GET',
              value: 'GET',
            },
            {
              label: 'POST',
              value: 'POST',
            },
            {
              label: 'DELETE',
              value: 'DELETE',
            },
            {
              label: 'PUT',
              value: 'PUT',
            },

          ]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width="md"
          name="requestExample"
          label="请求示例"
          initialValue={values.requestExample}
          placeholder="请输入请求示例"
          rules={
            [
              {
                required: true,
                message: '请输入请求示例',
              },
            ]
          }
        />
        <ProFormText
          width="md"
          name="requestHeader"
          label="请求头"
          placeholder="请输入请求头"
          initialValue="Content-Type: application/json"
          rules={
            [
              {
                required: true,
                message: '请输入请求头',
              },
            ]
          }
        />

      </ProForm.Group>
      <ProFormTextArea
        colProps={{ span: 24 }}
        name="requestParams"
        label="请求参数"
        initialValue={values.requestParams}
        placeholder="请输入请求参数,参考形式为:{'username': 'string', 'password': 'string'}"
        rules={
          [
            {
              required: true,
              message: '请输入请求参数',
            },
          ]
        }
      />
      <ProFormTextArea
        colProps={{ span: 24 }}
        name="description"
        label="接口描述"
        initialValue={values.description}
        rules={
          [
            {
              required: true,
              message: '请输入接口描述',
            },
          ]
        }
      />
    </ModalForm>
  );
};

export default InterfaceModalForm;
